<template>
  <view class="send-page-wrap">
    <view class="address-info-wrap mb-12">
      <view class="address-wrap">
        <view class="address-info" @click="handleToEditSend">
          <view class="icon-send">寄</view>

          <view v-if="sendInfo.id" class="address-info-wrap">
            <view class="name">{{ sendInfo.name }}</view>
            <view class="address">{{
              `${sendInfo.province}${sendInfo.city}${sendInfo.district}${sendInfo.name_address}${sendInfo.door_number}`
            }}</view>
          </view>

          <view v-else class="address-info-wrap">
            <view class="default-text">填写或选择寄件信息</view>
          </view>
        </view>

        <view
          class="address-address-book"
          @click.stop="handleToAddressList('send')"
        >
          地址簿
        </view>
      </view>

      <view class="address-wrap" @click="handleToEditReceiving">
        <view class="address-info">
          <view class="icon-receiving">收</view>

          <view v-if="receivingInfo.id" class="address-info-wrap">
            <view class="name">{{ receivingInfo.name }}</view>
            <view class="address">{{
              `${receivingInfo.province}${receivingInfo.city}${receivingInfo.district}${receivingInfo.name_address}${receivingInfo.door_number}`
            }}</view>
          </view>

          <view class="address-info-wrap" v-else>
            <view class="default-text">填写或选择收件信息</view>
          </view>
        </view>

        <view
          class="address-address-book"
          @click.stop="handleToAddressList('receiving')"
        >
          地址簿
        </view>
      </view>
    </view>

    <view class="mb-12">
      <uni-list-item
        showArrow
        clickable
        title="快递公司"
        :rightText="expressInfo.name || '请选择'"
        :class="{ 'selected-text': expressInfo.name }"
        @click="handleToExpress"
      />

      <uni-list-item
        showArrow
        clickable
        title="快递员"
        :rightText="expressManInfo.entity_name || '请选择'"
        :class="{ 'selected-text': expressManInfo.entity_name }"
        @click="handleToExpressPersonnel"
      />
    </view>

    <view class="mb-12">
      <uni-list-item
        showArrow
        clickable
        title="期望上门时间"
        :rightText="homeVisitTime.showText || '请选择'"
        :class="{ 'selected-text': homeVisitTime.showText }"
        @click="handleToHomeVisitTime"
      />

      <uni-list-item
        showArrow
        clickable
        title="物品重量"
        :rightText="weightGoods.showWeight || '请选择'"
        :class="{ 'selected-text': weightGoods.showWeight }"
        @click="handleToExpressWeight"
      />

      <view class="select-goods-type-wrap">
        <view class="left">贵重级别</view>
        <view class="right">
          <view class="default-text" v-if="!typeGoods.name">请选择</view>
          <view class="select-text" v-else>{{ typeGoods.name }}</view>

          <uni-icons
            class="arrow-icon"
            type="right"
            size="18"
            color="#BFBFC1"
          ></uni-icons>
        </view>

        <picker
          @change="handleChangeValuableLevel"
          :value="valuableLevel"
          :range="valuableLevelArray"
        >
          <view>1</view>
          <!--腾讯-->
        </picker>
      </view>

      <uni-list-item title="保险单" rightText="保险理赔价值300元" />
    </view>

    <uni-list-item
      title="费用估算"
      :rightText="weightGoods.showFreight || '请选择物品重量'"
      class="fee-text"
    />

    <view class="bottom-option">
      <view class="service-agreement-wrap">
        <van-checkbox
          :value="selectArg"
          shape="square"
          checked-color="#1989fa"
          @change="handleChangeArg"
          icon-size="34rpx"
        >
          <text class="arg-text"
            >我已阅读并同意
            <text class="import-text" @click.stop="handleToServiceAgreement"
              >《服务协议》</text
            ></text
          >
        </van-checkbox>
      </view>

      <view class="button-wrap">
        <button type="primary" class="btn-style" @click="handleSubmit">
          <view class="submit-text">确认下单</view>
        </button>
      </view>
    </view>

    <van-dialog id="van-dialog" />
    <van-toast id="van-toast" />
  </view>
</template>

<script>
const app = getApp();
import Toast from "@/wxcomponents/vant/toast/toast";
import dayjs from "@/utils/dayjs.min";

export default {
  data() {
    return {
      sendInfo: {},
      receivingInfo: {},
      expressInfo: {
        // 快递公司信息
      },
      expressManInfo: {
        // 快递员信息
      },
      homeVisitTime: {
        // 期望上门时间
      },
      weightGoods: {},
      typeGoods: {
        name: "普通物品",
      },
      selectArg: false,
      showSelectType: false,
      actions: [
        {
          name: "普通物品",
        },
        {
          name: "一般贵重",
        },
        {
          name: "比较贵重",
        },
        {
          name: "非常贵重",
        },
      ],

      valuableLevelArray: ["普通物品", "一般贵重", "比较贵重", "非常贵重"],
      valuableLevel: 0,
    };
  },
  methods: {
    handleChangeValuableLevel(res) {
      const { detail } = res;
      const { value } = detail;

      this.valuableLevel = value;
      this.typeGoods.name = this.valuableLevelArray[value];
    },
    handleToAddressList(type) {
      const that = this;
      console.log(type);
      uni.navigateTo({
        url:
          "/pages/myFeature/addressManagement/index?source=sendPage&type=" +
          type,
        events: {
          editReceivingInfo: function (res) {
            console.log("res=====", res);
            that.receivingInfo = res;
          },
          editSendInfo: function (res) {
            console.log(res);
            that.sendInfo = res;
          },
        },
      });
    },
    handleToServiceAgreement() {
      uni.navigateTo({
        url: "/pages/send/serviceAgreement",
      });
    },
    handleChangeArg(selectInfo) {
      const { detail } = selectInfo;

      this.selectArg = detail;
    },
    handleSubmit() {
      const {
        sendInfo,
        receivingInfo,
        expressInfo,
        expressManInfo,
        homeVisitTime,
        weightGoods,
        typeGoods,
        selectArg,
      } = this;

      if (!sendInfo.id) {
        Toast("请填写或选择寄件信息");
        return;
      }

      if (!receivingInfo.id) {
        Toast("请填写或选择收件信息");
        return;
      }

      // 快递员非必选
      /*if (!expressManInfo.express_id) {
        Toast('请选择快递员')
        return
      }*/

      if (!homeVisitTime.showText) {
        Toast("请选择期望上门时间");
        return;
      }

      if (!weightGoods.showWeight) {
        Toast("请选择物品重量");
        return;
      }

      if (!selectArg) {
        Toast("请阅读并同意《服务协议》");
        return;
      }

      const { radio, timePeriod } = homeVisitTime;
      const timePeriodMapStartEndTime = {
        0: {
          start: "09:00:00",
          end: "11:00:00",
        },
        1: {
          start: "11:00:00",
          end: "13:00:00",
        },
        2: {
          start: "13:00:00",
          end: "15:00:00",
        },
        3: {
          start: "15:00:00",
          end: "17:00:00",
        },
        4: {
          start: "17:00:00",
          end: "19:00:00",
        },
      };
      let startTime = "";
      let endTime = "";

      if (parseInt(radio) === 1) {
        startTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
        endTime = dayjs().add(30, "minute").format("YYYY-MM-DD HH:mm:ss");
      } else if (parseInt(radio) === 2) {
        startTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
        endTime = dayjs().add(2, "hour").format("YYYY-MM-DD HH:mm:ss");
      } else if (parseInt(radio) === 3) {
        const timePeriodObj = timePeriodMapStartEndTime[timePeriod];
        let today = dayjs().format("YYYY-MM-DD");

        startTime = today + " " + timePeriodObj.start;
        endTime = today + " " + timePeriodObj.end;
      } else if (parseInt(radio) === 4) {
        const timePeriodObj = timePeriodMapStartEndTime[timePeriod];
        let today = dayjs().add(1, "day").format("YYYY-MM-DD");

        startTime = today + " " + timePeriodObj.start;
        endTime = today + " " + timePeriodObj.end;
      } else if (parseInt(radio) === 5) {
        const timePeriodObj = timePeriodMapStartEndTime[timePeriod];
        let today = dayjs().add(2, "day").format("YYYY-MM-DD");

        startTime = today + " " + timePeriodObj.start;
        endTime = today + " " + timePeriodObj.end;
      }

      Toast.loading({
        message: "加载中",
        mask: false,
        duration: 0,
        zIndex: 9999999,
        forbidClick: true,
      });
      app
        .request(
          {
            sending_id: sendInfo.id,
            receiving_id: receivingInfo.id,
            express_name: expressInfo.name,
            express_id: expressManInfo.express_id || "",
            start_door_time: startTime,
            end_door_time: endTime,
            goods_level: typeGoods.name,
            goods_weight: weightGoods.weight,
          },
          "/api/logistics/order/sending"
        )
        .then((res) => {
          const { code, msg } = res;

          if (code === 1) {
            Toast("下单成功");

            this.handleInitData();
          } else {
            Toast(msg);
          }
        });
    },
    handleToExpress() {
      const that = this;
      console.log(12312);
      uni.navigateTo({
        url: "/pages/send/selectExpress",
        events: {
          selectExpress(res) {
            console.log(res);
            that.expressInfo = res;
          },
        },
      });
    },
    handleToExpressPersonnel() {
      const that = this;
      const { expressManInfo } = this;

      let str = app.getQueryStringByObject({
        id: expressManInfo.express_id || "",
      });

      uni.navigateTo({
        url: "/pages/send/expressPersonnel" + str,
        events: {
          selectExpressMan(res) {
            console.log(res);
            that.expressManInfo = res;
          },
        },
      });
    },
    handleToHomeVisitTime() {
      const that = this;

      uni.navigateTo({
        url: "/pages/send/homeVisitTime",
        events: {
          selectHomeVisitTime(res) {
            console.log("res=====",res);
            that.homeVisitTime = res;
          },
        },
      });
    },
    handleToExpressWeight() {
      const that = this;

      uni.navigateTo({
        url: "/pages/send/expressWeight",
        events: {
          selectExpressWeight(res) {
            console.log("res+++++", res);
            that.weightGoods = res;
          },
        },
      });
    },
    handleToEditReceiving() {
      const {
        id,
        name,
        mobile,
        province,
        city,
        district,
        name_address,
        door_number,
        location,
      } = this.receivingInfo;
      let data = {
        source: "sendPage",
        type: "receiving",
      };
      if (id) {
        data = {
          id,
          name,
          mobile,
          province,
          city,
          district,
          name_address,
          door_number,
          location,
          ...data,
        };
      }

      let str = app.getQueryStringByObject(data);
      const that = this;

      uni.navigateTo({
        url: "/pages/myFeature/addressManagement/editAddress" + str,
        events: {
          editReceivingInfo: function (res) {
            that.receivingInfo = res;
            console.log(res);
            console.log("编辑了收件信息");
          },
        },
      });
    },
    handleToEditSend() {
      const {
        id,
        name,
        mobile,
        province,
        city,
        district,
        name_address,
        door_number,
        location,
      } = this.sendInfo;
      let data = {
        source: "sendPage",
        type: "send",
      };
      if (id) {
        data = {
          id,
          name,
          mobile,
          province,
          city,
          district,
          name_address,
          door_number,
          location,
          ...data,
        };
      }

      let str = app.getQueryStringByObject(data);
      const that = this;

      uni.navigateTo({
        url: "/pages/myFeature/addressManagement/editAddress" + str,
        events: {
          editSendInfo: function (res) {
            that.sendInfo = res;
            console.log(res);
            console.log("编辑了寄件信息");
          },
        },
      });
    },
    handleGetSendInfo() {
      if (app.globalData.latitude && app.globalData.longitude) {
        app
          .request(
            {
              lat: app.globalData.latitude,
              lnt: app.globalData.longitude,
            },
            "/api/logistics/address/address_info"
          )
          .then((res) => {
            console.log(res);
            const { code, data } = res;

            if (code === 1) {
              this.sendInfo = data;
            }
          });
      }
    },
    handleInitData() {
      this.receivingInfo = {};
      this.expressInfo = {};
      this.expressManInfo = {};
      this.homeVisitTime = {};
      this.weightGoods = {};
      this.typeGoods = {
        name: "普通物品",
      };
    },

    handleTestVideoChat() {
      wx.join1v1Chat({
        caller: {
          nickname: "快递员",
          headImage:
            "https://tdt.qwtjt.com/uploads/20240127/6fd1fea199823ac819727b4cc8270fc0.jpeg",
          openid: "oXJ-Y6zcPwTQXOrrDYbaiqglwXs0",
        },
        listener: {
          nickname: "语音接听方",
          headImage: "",
          openid: "oXJ-Y69RpI8Xmxl4t6mcRar-zEfA",
        },
        roomType: "video",
        success(res) {
          console.log(res);
        },
        fail(res) {
          console.log(res);
        },
        complete(res) {
          console.log(res);
        },
      });
    },
  },
  onShow() {
    console.log(app.globalData.selectExpressManInfo);
    if (app.globalData.selectExpressManInfo) {
      this.expressManInfo = app.globalData.selectExpressManInfo;
      app.globalData.selectExpressManInfo = false;
    }
  },
  onLoad(res) {
    this.handleGetSendInfo();

    /* uni.login({
      provider: 'weixin', //使用微信登录
      success: function (res) {
        const {
          code
        } = res

        console.log(code);
      },
      fail(res) {
        console.log(res);
      }
    });*/
  },
};
</script>

<style lang="less">
.send-page-wrap {
  min-height: 100vh;
  background-color: #f2f2f2;

  .mb-12 {
    margin-bottom: 12px;
  }

  .address-info-wrap {
    .address-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18rpx 16rpx;
      box-sizing: border-box;
      background-color: #fff;

      .address-info {
        display: flex;
        align-items: center;

        .icon-send {
          width: 58rpx;
          height: 58rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          background-color: #f8970c;
          color: #fff;
          margin-right: 16rpx;
          font-size: 28rpx;
        }

        .address-info-wrap {
          display: flex;
          align-items: center;

          .default-text {
            font-size: 28rpx;
            color: #999;
          }
        }

        .icon-receiving {
          width: 58rpx;
          height: 58rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          background-color: #157fb9;
          color: #fff;
          margin-right: 16rpx;
          font-size: 28rpx;
        }

        .name {
          font-size: 28rpx;
          margin-right: 16px;
          white-space: nowrap;
        }

        .address {
          max-width: 420rpx;
          font-size: 24rpx;
        }
      }

      .address-address-book {
        font-size: 30rpx;
        color: #ff9600;
        white-space: nowrap;
      }
    }
  }

  .price-wrap {
    font-size: 24rpx;
    color: #ff9600;
  }

  .bottom-option {
    .service-agreement-wrap {
      width: 100%;
      padding: 18rpx 14rpx;
      box-sizing: border-box;
      .arg-text {
        font-size: 26rpx;
        .import-text {
          color: #1989fa;
        }
      }
    }

    .button-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      .btn-style {
        color: #fff;
        background-color: #1989fa;
        border-color: #1989fa;
      }
      .submit-text {
        width: 650rpx;
      }
    }
  }

  .selected-text {
    .uni-list-item__extra-text {
      color: #000;
    }
  }

  .fee-text {
    .uni-list-item__extra-text {
      color: #ff9600;
    }
  }

  .select-goods-type-wrap {
    position: relative;
    width: 100%;
    height: 43px;
    background-color: #fff;
    padding-left: 15px;
    padding-right: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #f2f2f2;
    .left {
      font-size: 14px;
      color: #3b4144;
    }

    .right {
      display: flex;
      align-items: center;
      .default-text {
        color: #999;
        font-size: 12px;
      }

      .select-text {
        color: #000;
        font-size: 12px;
      }

      .arrow-icon {
        margin-left: 10px;
      }
    }

    picker {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
      z-index: 99;
      left: 0;
      top: 0;
    }
  }
}
</style>
